import ajax from "../../util/request"
import { useState, useEffect } from "react"
import { useParams, NavLink ,useNavigate} from "react-router-dom"


function NewsList() {
    // 使用钩子函数创建一个状态
    const [list, setList] = useState([]);

    // useParams获取路由的params传参
    const params = useParams()
    console.log(params);
    // 传入非空数组，数组中的数据发生变化，会触发函数执行
    useEffect(() => {
        ajax('/content/queryList', { t_cat_plant_fk: params.t_cat_plant_pk, rows: 10 }).then((res) => {
            if (res.data.status > 0) {
                setList([...res.data.result_data])
            }
        })
        //第二个参数要侦听的数据，应该可以不加
    }, [params.t_cat_plant_pk])


    const header = [
        { t_cat_plant_pk: 405, title: "学院新闻" },
        { t_cat_plant_pk: 406, title: "党建动态" },
        { t_cat_plant_pk: 407, title: "通知公告" },
        { t_cat_plant_pk: 408, title: "分院动态" },
    ]
    const Navigate=useNavigate()

    return (
        <div>
            <header>
                {header.map((v) => <NavLink to={'/hello/newslist/' + v.t_cat_plant_pk} key={v.t_cat_plant_pk}>{v.title}</NavLink>)}
            </header>
            <ul>
                {list.map(v => (<li key={v.t_content_pk}>{v.title}</li>))}
            </ul>
            <button onClick={() => Navigate('/hello/newslist/more')} >阅读更多</button> 
        </div>
    )
}

export default NewsList
